<template>
	<div class="home-wrap">
		<div class="home-list">
			<h4 class="home-tj hot-rank">
        <span></span><span></span><span></span><span></span>
        热度排行
      </h4>
			<div class="home-List-box" >
        <InfoList :info-list="IndexPopularityInfo.data"></InfoList>
<!--				<InfoItem :info-list="IndexPopularityInfo.data"></InfoItem>-->
			</div>
		</div>
    <hr class="bttn-minimal bttn-md bttn-primary bttn-color">
		<div class="home-list">
			<h4 class="home-tj list-rank">校缘列表</h4>
			<div class="home-List-box" >
        <InfoList :info-list="IndexInfo.data"></InfoList>
<!--				<InfoItem :info-list="IndexInfo.data"></InfoItem>-->
        <el-pagination background
                       v-model:current-page="IndexInfo.current"
                       @update:current-page="currentChange"
                       :page-count="IndexInfo.pages"
                       layout="prev, pager, next"
                       style="position: absolute;right: 160px"
                       :total="50" />
<!--        <el-pagination v-model:current-page="IndexInfo.current"-->
<!--                       @update:current-page="currentChange"-->
<!--                       :page-count="IndexInfo.pages" layout="prev, pager, next"-->
<!--                       :total="50"-->
<!--                        class="mt-4"/>-->
<!--				<n-pagination :prefix="prefix()" v-model:page="IndexInfo.current" :next="nextPage" :page-count="IndexInfo.pages" class="pages" />-->
			</div>
		</div>
		<div class="home-btm bttn-stretch bttn-sm bttn-primary bttn-color">
			<span>想要查看更多符合条件的用户？请搜索</span>
      <router-link to="/search" class="search-sear">前往搜索</router-link>
		</div>
	</div>
<!--  <div class="mask"></div>-->
</template>

<script>
import Header from '../components/head/Header.vue'
import Footer from '../components/foot/Footer.vue'
import InfoItem from "@/components/InfoItem.vue";
import {formatAge} from "../../utils/utils";
import {ref} from "vue";
import {ftpUrlImg} from "@/global/config";
import InfoList from '../components/InfoList.vue'
	export default {
		// eslint-disable-next-line vue/multi-word-component-names,no-mixed-spaces-and-tabs
	  name: 'Home',
		// eslint-disable-next-line no-mixed-spaces-and-tabs
	  components:{Header,Footer,InfoItem,InfoList},
    beforeCreate() {
      // this.$requestCenter.checkWebToken().then((e) => {
      //   if (e.data == null) {
      //     this.hideHead(false)
      //     this.$router.replace("/welcome")
      //   }
      // })
    },
		created() {
			this.getIndexPopularityInfo();
			this.getIndexInfo(1);
      // if (this.$router.path !== "/")
      //   this.$router.replace("/")
		},
		methods: {

			formatAge,
			//分页
			currentChange(e){
				this.getIndexInfo(e)
				// console.log(e)
			},
			nextPage(e){
				console.log(e)
			},
			async getIndexInfo(current){
        this.$loading();
				let params = {
					current: current,
				};
				await this.$requestCenter.getIndexInfo(params).then((e)=>{
					console.log(e)
					this.IndexInfo = e.data;
					console.log(this.IndexPopularityInfo,"首页数据")
				})
        this.$loading().close();
			},
			async getIndexPopularityInfo(){
				await this.$requestCenter.getIndexPopularityInfo({current:1}).then((e)=>{
					console.log(e)
					this.IndexPopularityInfo = e.data
					console.log(this.IndexPopularityInfo,"热度排行榜")
				})
        this.$loading().close();
			},

		},
		setup(props,{emit}) {
      // function hideHead(e){
      //   emit('hideHead',e)
      // }
			return {
				IndexInfo: ref([]),
				IndexPopularityInfo: ref([]),
				ftpUrlImg: ftpUrlImg,
        // hideHead
			};
		},
	}
</script>

<style lang="less" scoped>
@import "./src/assets/style/base";
	.home-wrap{
		padding-top: 74px;
		width: 90%;
		margin: 0 auto;
    position: relative;
	}
	.home-nav{
		padding: 10px 0;
		margin-top: 15px;
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 2px 1px 5px #dedede;
		ul{
			width: 100%;
			text-align: center;
			li{
				float: left;
				width: 33.33%;
				list-style: none;
				span{
					color: rgb(243, 124, 50);
					font-size: 16px;
					font-weight: 400;
				}
			}
			.home-like{
				border-left: 1px solid #dcdcdc;
				border-right: 1px solid #dcdcdc;
			}
		}
	}
	.home-btm{
		padding: 10px 0;
		margin: 30px 0 40px 0;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		span{
			color: #333;
			padding-right: 20px;
		}
    .search-sear{
      display: block;
      background: linear-gradient(to right, @bttn-color 0%, #bc4258 100%);
      color: #fff;
      padding: 8px;
      text-decoration: none;
      width: 100px;
      border-radius: 4px;
      text-decoration: none;
    }
	}
	.home-list {
		padding: 20px 0;
		margin: 20px 0;
		//border-bottom: 1px solid #ced2e7;
	}
	.pages {
		float: right !important;
		padding: 10px 55px 0 0 !important;
	}
  .bttn-color{
    color: @bttn-color;
  }
  //.mask{
  //  position: fixed;
  //  bottom: 0;
  //  width: 100%;
  //  height: 100%;
  //  background: rgba(238, 238, 238, 0.25);
  //  z-index: 200;
  //}
</style>
<style>
.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #de7285;
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #de7285;
color: black;
}

</style>